<template>
	<view class="content">
		<view class="header"><text @tap="del()">删除</text></view>
		<view class="car-list">
			<image src="../../static/images/noshuju.png" class="no-data" v-show="noshuju"></image>
			<view class="car-item uni-row" v-for="(item, index) in carlist" :key="index" @tap="goinfo" :data-id="item.spu_id">
				<view class="xuan-img" @tap.stop="choose" :data-index="index"><image :src="item.selectimg"  style="top:calc(50% - 18rpx);left: 15rpx;"  ></image></view>
				<view class="car-icon"><image :src="item.img"></image></view>
				<view class="car-info">	
					<view class="car-name">{{item.name}}</view>
					<view class="car-price" v-if="role=='p'">
						<text style="font-size: 18rpx;">￥</text>
						<text>{{item.user_price}}</text>
					</view>
					<view class="car-price" v-if="role=='s'">
						<text style="font-size: 18rpx;">￥</text>
						<text>{{item.merchant_price}}</text>
					</view>
					<view class="car-num uni-row">
						<view class="btn jia" @tap.stop="reduce(index,item.id)">-</view>
						<view class="num">{{item.count}}</view>
						<view class="btn jian" @tap.stop="add(index,item.id)">+</view>
					</view>
				</view>
			</view>
			
			<view class="bottom">
				<view style="position: relative;" class="bottom-view">
					<!-- <view class="select select-active">
						<view>
							
						</view>
					</view> -->
					<image @tap="all()" :src="quanxuan.selectimg" class="select" style="top: calc(50% - 18rpx);left: 10rpx;"></image>
					<text @tap="all()">全选</text>
					<view class="jiesuan-container ">
						<view class="jiesuan" @tap="jiesuan()">结算</view>
						<view class="heji">
							合计：
							<text style="color: #38D180;">￥{{sum_total}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import httpPath from '@/static/js/path.js';
import { getlogin } from '@/static/js/login.js';
import { isshangjia } from '@/static/js/login.js';
export default {
	data() {
		return {
			role: 'p',
			wxinfo_id: '',
			carlist: [],
			choosedlist: [],
			noshuju: false,
			idstr:"",
			quanxuan: { checked: 0, selectimg: '../../static/images/weixuanzhong.png' },
			sum_total:0,
			title:"购物车",
		};
	},
	onLoad() {
		this.userinfo = getlogin();
		this.role = isshangjia();
		this.wxinfo_id = this.userinfo.wxinfo_id;
		this.getdata();
		if(this.role=='s'){
			this.title="订货单"
		}else{
			this.title="购物车"
		}
		uni.setNavigationBarTitle({
			title:this.title
		})
	},
	methods: {
		/**
		 * 删除
		 */
		del(){
			if(!this.idstr){
				uni.showModal({
					showCancel:false,
					content:"请选择要删除的商品"
				})
				return false;
			}
			
			
			uni.request({
				url: httpPath.filePath + '/index/shopping/delete',
				method: 'POST',
				header: { 'content-type': 'application/x-www-form-urlencoded' },
				data: {id:this.idstr},
				success: res => {
					if (res.data.code == 200) {
						this.getdata();
					}
				}
			});
		},
		/**
		 * 前往详情页面
		 */
		goinfo(e){
			uni.navigateTo({
				url:"goodsinfo?id="+e.currentTarget.dataset.id
			})
		},
		
		/**
		 * 计算总价格
		 */
		gettotal(){
			this.sum_total=0;
			if(this.role=='p'){
				for (let i = 0; i < this.carlist.length; i++) {
					if(this.carlist[i].checked == 1){
						this.sum_total += parseFloat(this.carlist[i].user_price)*this.carlist[i].count; 
					}
				}
			}else if(this.role=='s'){
				for (let i = 0; i < this.carlist.length; i++) {
					if(this.carlist[i].checked == 1){
						this.sum_total += parseFloat(this.carlist[i].merchant_price)*this.carlist[i].count; 
					}
				}
			}
			this.sum_total=Math.round(this.sum_total*100)/100
		},
		// 获取选中的商品
		getchoosed(){
			this.idstr="";
			this.choosedlist=[];
			for (let i = 0; i < this.carlist.length; i++) {
				if(this.carlist[i].checked == 1){
					this.idstr += (this.carlist[i].id+",");
					
					this.choosedlist.push(this.carlist[i])
				}
			}
			var reg=/,$/gi;
			this.idstr=this.idstr.replace(reg,"");
			
		},
		// 判断是否全选
		isall(){
			let isall=true;
			for (let i = 0; i < this.carlist.length; i++) {
				if(this.carlist[i].checked ==0){
					isall=false;
				}
			}
			if(isall){
				this.quanxuan={checked: 1, selectimg: '../../static/images/xuanzhong.png' }
			}else{
				this.quanxuan={checked: 0, selectimg: '../../static/images/weixuanzhong.png' }
			}
		},
		/**
		 * 全选
		 */
		all() {
			if (this.carlist.length != 0) {
				if (this.quanxuan.checked == 0) {
					this.quanxuan.checked = 1;
					this.quanxuan.selectimg="../../static/images/xuanzhong.png";
					for (let i = 0; i < this.carlist.length; i++) {
						this.carlist[i].checked = 1;
						this.carlist[i].selectimg = '../../static/images/xuanzhong.png';
					}
				}else{
					this.quanxuan.checked = 0
					this.quanxuan.selectimg="../../static/images/weixuanzhong.png";
					for (let i = 0; i < this.carlist.length; i++) {
						this.carlist[i].checked = 0;
						this.carlist[i].selectimg = '../../static/images/weixuanzhong.png';
					}
				}
			}
			this.getchoosed();
			this.gettotal();
		},
		/**
		 * 选择商品
		 */
		choose(e) {
			let index = e.currentTarget.dataset.index;
			if (this.carlist[index].checked == 1) {
				this.carlist[index].checked = 0;
				this.carlist[index].selectimg = '../../static/images/weixuanzhong.png';
			} else {
				this.carlist[index].checked = 1;
				this.carlist[index].selectimg = '../../static/images/xuanzhong.png';
			}
		  
			this.isall();
			this.getchoosed();
			this.gettotal();
		},

		/**
		 * 获取购物车列表
		 */
		getdata() {
			this.carlist = [];
			uni.request({
				url: httpPath.filePath + '/index/shopping/index',
				method: 'POST',
				header: { 'content-type': 'application/x-www-form-urlencoded' },
				data: { wxinfo_id: this.wxinfo_id },
				success: res => {
					if (res.data.code == 200) {
						if (res.data.data.length != 0) {
							this.noshuju = false;
							this.carlist = res.data.data;
							for (let i = 0; i < res.data.data.length; i++) {
								this.carlist[i].selectimg = '../../static/images/xuanzhong.png';
								this.carlist[i].checked = 1;
							}
                            this.gettotal();
							this.isall();
							this.getchoosed();
						} else {
							this.noshuju = true;
						}
					}
				}
			});
		},

		jiesuan() {
			if(this.choosedlist.length==0){
				uni.showModal({
					showCancel:false,
					content:"请选择商品"
				})
				return false;
			}else{
				let str= JSON.stringify(this.choosedlist)
				uni.navigateTo({
					url: '../user/querendingdan?goods='+str
				});
			}
			
		},
		/**
		 * @param {Object} index点击加号时相应的数量加
		 */
		add(index,id) {
			this.carlist[index].count++;
			uni.request({
				url: httpPath.filePath + '/index/orderlist/edit',
				method: 'POST',
				header: { 'content-type': 'application/x-www-form-urlencoded' },
				data: { wxinfo_id: this.wxinfo_id,id:id,count:this.carlist[index].count },
				success: res => {
					if (res.data.code == 200) {
						this.gettotal();
					}else{
						uni.showModal({
							showCancel:false,
							content:res.data.msg
						})
						this.carlist[index].count--
					}
				}
			});
			
		},
		/**
		 * @param {Object} index点击减号时相应的数量减少
		 */
		reduce(index,id) {
			if(this.carlist[index].count==1){
				uni.showModal({
					showCancel:false,
					content:"已经是最小了，不能再减了"
				})
			}else{
				this.carlist[index].count--;
				uni.request({
					url: httpPath.filePath + '/index/orderlist/edit',
					method: 'POST',
					header: { 'content-type': 'application/x-www-form-urlencoded' },
					data: { wxinfo_id: this.wxinfo_id,count:this.carlist[index].count,id:id },
					success: res => {
						if (res.data.code == 200) {
							this.gettotal();
						}else{
							uni.showModal({
								showCancel:false,
								content:res.data.msg
							})
							this.carlist[index].count++
						}
					}
				});
			}
			
		}
	}
};
</script>

<style>
page {
	background: #f9f9f9;
	box-sizing: border-box;
}
.xuan-img{position: absolute;top: 0px;left: 0px;width: 80rpx;height: 214rpx;}
.xuan-img image{
	width: 36rpx;height: 36rpx;margin-top:89rpx;margin-left: 10rpx;
}
.header {
	width: 100%;
	height: 87rpx;
	background: #333333;
}
.header text {
	display: block;
	float: right;
	color: #ffffff;
	background: url(../../static/images/shanchu-bai.png) no-repeat;
	background-size: 32rpx;
	background-position: 0rpx 30rpx;
	line-height: 87rpx;
	padding-left: 38rpx;
	margin-right: 32rpx;
	font-size: 28rpx;
}
.car-list {
	padding: 20rpx 32rpx;
}
.car-item {
	background: #ffffff;
	border-radius: 5px;
	margin-bottom: 20rpx;
	position: relative;
	padding: 32rpx 0px;
	height: 214rpx;
	box-sizing: border-box;
	padding-left: 60rpx;
}
.car-icon {
	width: 140rpx;
	height: 140rpx;
	margin-right: 29rpx;
	margin-top: 10rpx;
}
.car-icon image {
	width: 100%;
	height: 100%;
}
.car-info {
	width: 432rpx;
}
.car-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal !important;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-height: 46rpx;
	height: 92rpx;

	font-size: 28rpx;
	color: #333333;
}
.car-price {
	color: #38d180;
	font-size: 32rpx;
	font-weight: bold;
	margin-top: 10rpx;
}
.car-num {
	position: absolute;
	bottom: 32rpx;
	right: 47rpx;
	height: 50rpx;
	line-height: 50rpx;
}
.car-num view {
	text-align: center;
	color: #666666;
	font-size: 22rpx;
}
.car-num .btn {
	width: 60rpx;
	height: 50rpx;
	border: 1px solid #bbbbbb;
	line-height: 50rpx;
}
.num {
	width: 60rpx;
	height: 50rpx;
	line-height: 50rpx;
	border-bottom: 1px solid #bbbbbb;
	border-top: 1px solid #bbbbbb;
}
.jia {
	border-radius: 3px 0px 0px 3px;
}
.jian {
	border-radius: 0rpx 3px 3px 0rpx;
}
.jiesuan {
	width: 150rpx;
	height: 60rpx;
	border-radius: 30rpx;
	margin-top: 15rpx;
	float: right;
	font-size: ;
	color: #ffffff;
	line-height: 60rpx;
	text-align: center;
	background: linear-gradient(-45deg, rgba(56, 209, 128, 0.96), rgba(154, 255, 221, 0.96));
}
.heji {
	text-align: right;
	padding-right: 10rpx;
	float: right;
}
.bottom {
	position: fixed;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 90rpx;
	background: #ffffff;
	border-top: 1px solid #f2f2f2;
}
.bottom-view {
	padding-left: 77rpx;
	width: 100%;
	height: 90rpx;
	line-height: 90rpx;
	font-weight: 500;
	color: rgba(102, 102, 102, 1);
	font-size: 28rpx;
	box-sizing: border-box;
}
.bottom-view .select {
	left: 32rpx;
	top: 33rpx;
}
.jiesuan-container {
	width: 60%;
	float: right;
	padding-right: 32rpx;
	height: 90rpx;
}
.select {
	width: 36rpx;
	height: 36rpx;
	position: absolute;
}
</style>
